<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        img{
            display: block;
            /* 防止图片与div有3px的缝隙 */
        }
        .box{
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .box div{
            width: 32%;
            border: 2px solid rgb(87, 87, 87);
            position: relative;
            overflow: hidden;
        }
        
        
        .div1 img{
            width: 100%;
            display: block;
            transition: all 2s;
        }
        .div1:hover img{
            transform: translatex(50px);
            opacity: 0.5;
        }
        .div1 h2{
            position: absolute;
            top: 30px;
            left: 10px;
            color: white;
            transition: all 2s;
        }
        .div1:hover h2{
            transform: translatex(100px);
        }
        .div1 .a1{
            position: absolute;
            top: 80px;
            left: 60px;
            background: rgb(245, 174, 174);
            transform: translatey(300px);
            transition: all 2s;
        }
        .div1 .a2{
            position: absolute;
            top: 130px;
            left: 60px;
            background: rgb(245, 174, 174);
            transform: translatex(300px);
            transition: all 2s;
        }
        .div1 .a3{
            position: absolute;
            top: 180px;
            left: 60px;
            background: rgb(245, 174, 174);
            transform: translatex(-300px);
            transition: all 2s;
        }
        .div1:hover .a1{
            transform: translatey(0);
        }
        .div1:hover .a2{
            transform: translatex(0);
        }
        .div1:hover .a3{
            transform: translatex(0);
        }

        .box .div2 h2{
            color: white;
            position: absolute;
            top: 30px;
            left: 30px;
        }
        .div2 img{
            width: 100%;
            transition: all 2s;
            transform: translatex(25px);
        }
        .div2:hover img{
            transform: translateX(0);
            opacity: 0.5;
        }
        .div2 p{
            width: 100px;
            background-color: #fff;
            transform: translatex(-200px);
        }
        .div2 .b1{
            position: absolute;
            top: 80px;
            left: 40px;
            transition: all 1.5s;
        }
        .div2 .b2{
            position: absolute;
            top: 130px;
            left: 40px;
            transition: all 1.75s;
        }
        .div2 .b3{
            position: absolute;
            top: 180px;
            left: 40px;
            transition: all 2s;
        }
        .div2:hover>p{
            transform: translateX(0);
        }
        
        .div3>.img1{
            width: 100%;
            transition: all 2s;
        }
        .div3:hover .img1{
            opacity: 0.5;
            transform: translatey(-30px);
        }
        .div3 h2{
            position: absolute;
            top: 30px;
            left: 30px;
            transform: translatey(-150px);
            transition: all 2s;
        }
        .div3>p{
            position: absolute;
            top: 80px;
            left: 40px;
            transform: translatey(180px);
            transition: all 2s;
            opacity: 0;
        }
        .div3:hover h2{
            transform: translatey(0);
        }
        .div3:hover p{
            transform: translatey(0);
            opacity: 1;
        }
        .div3 .music{
            position:absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            /* transition: all 1s; */
            animation: donghua 3s linear infinite;
        }
        /* .div3:hover>.music{
            transform: rotate(360deg);
        } */

        /* 关键帧animation */
        @keyframes donghua{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="div1"><img src="./image/1989 Polaroid/1.png" alt="">
            <h2>唱片</h2>
            <p class="a1">1111111</p>
            <p class="a2">2222222</p>
            <p class="a3">3333333</p>
        </div>
        <div class="div2">
            <img src="./image/1989 Polaroid/2.png" alt="">
            <h2>name</h2>
            <p class="b1">身高</p>
            <p class="b2">体重</p>
            <p class="b3">肺活量</p>
        </div>
        <div class="div3">
            <img src="./image/1989 Polaroid/3.png" alt="" class="img1">
            <h2>dadaddada</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores quaerat blanditiis aliquid! 
                Necessitatibus quae minus earum libero omnis natus nam assumenda. Animi pariatur autem quia at 
                deleniti accusamus atque iure!</p>
            <img src="./image/1989 Polaroid/musicBtn.png" class="music">
        </div>
    </div>
</body>
</html>